<template>
    <div class="app-container">
        <el-table :data="kpList">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="系列名称" align="center" prop="name">
                <template slot-scope="scope">
                    <span v-for="(item, index) in scope.row" :key="index">{{ item.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="样片详情" align="center" prop="pic">
                <template slot-scope="scope">
                    <el-image v-for="(item, index) in scope.row" :src="item.picFirst" :key="index" alt="" weight="20"
                        :preview-src-list="srcList" @click="look(scope.row)" style="width:60px; height: 60px;">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="updata(scope.row)" type="text" size="small">修改</el-button>
                    <el-popconfirm title="是否确认删除所有图片？若删除单张详情图片，请在修改操作下进行" @confirm="handledelete(scope.row)">
                        <el-button slot="reference" type="text" size="small">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 修改样片对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="closeDialog">
            <el-form ref="form" :model="form" :rules="rules" label-width="150px">
                <el-form-item label="系列名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入系列名称" style="width: 180px;" />
                </el-form-item>
                <el-form-item label="详情图片" prop="picc">
                    <el-upload class="upload-el" :action="url" accept=".jpg, .png"
                        :headers="headers" list-type="picture" :file-list="fileList" :on-success="handlePreview" multiple
                        :on-remove="handleRemove" name="fileName">
                        <el-button size="small" type="primary">点击上传详情图片</el-button>
                        <template #tip>
                            <div class="el-upload__tip">详情图片不能低于两张</div>
                            <ul class="el-upload-list el-upload-list--picture show">
                                <li v-for="(item, index) in fileList" class="el-upload-list__item is-success"
                                    tabindex="0">
                                    <el-image style="cursor: pointer;" :preview-src-list="srcList_s"
                                        @click="looks(item.url)" class="el-upload-list__item-thumbnail" :src="item.url">
                                    </el-image>
                                    <a class="el-upload-list__item-name">
                                        <i class="el-icon-document"></i>
                                        {{ item.name }}
                                    </a>
                                    <label class="el-upload-list__item-status-label">
                                        <i class="el-icon-upload-success el-icon-check"></i>
                                    </label>
                                    <!-- onRemove：删除已上传的图片文件 -->
                                    <i class="el-icon-close" @click="handleRemove(item, fileList)"></i>
                                </li>
                            </ul>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="xiugai">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { hslfyp, selectHslfHlch, updateHslfHlch, deleteOnePCHSLFxiangqing001 } from "@/api/business/zhuangxiu.js";
import { getToken } from '@/utils/auth'
export default {
    data() {
        return {
            fileArr: [],
            srcList: [],
            fileList: [],
            url: process.env.VUE_APP_BASE_API + "/upload/fileUpload",
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            title: '',
            open: false,
            kpList: [],
            date: {
                typeid: this.$route.query.typeid,
            },
            form: {
                pId: '',
                name: '',
                picc: '',
            },
            date1: {
                pId: '',
                typeid: this.$route.query.typeid
            },
            rules: {},
            srcList_s: [],
        }
    },
    created() {
        this.getList();
    },
    methods: {
        changeFn(file, fileList) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.upFile(file)
        },
        getList() {
            hslfyp(this.date).then(response => {
                this.kpList = response.data.data.shuju;
            })
        },
        closeDialog() {
            this.fileList = []
        },
        // 修改
        updata(row) {
            row.forEach(item => {
                row.pId = item.pId
            });
            this.form.pId = row.pId;
            selectHslfHlch(this.form).then(response => {
                this.form.name = response.data.data.name;
                this.form.picc = response.data.data.picc;
                response.data.data.picc.split(',').forEach(item => {
                    let Object = {
                        name: '',
                        url: ''
                    }
                    Object.name = item.slice(item.lastIndexOf('/') + 1);
                    Object.url = item;
                    this.fileList.push(Object)
                })
            })
            this.open = true;
        },
        xiugai() {
            updateHslfHlch(this.form).then(response => {
                this.getList();
                this.open = false;
            })
        },
        // 修改详情图上传
        handleRemove(file, fileList) {
            this.fileList = fileList;
            let Alist = [];
            let List = [];
            this.fileList.forEach(item=>{
                if(item != file){
                    Alist.push(item)
                }
            })
            this.fileList = Alist;
            this.fileList.forEach(item => {
                if (item.response) {
                    List.push(item.response.data)
                } else {
                    List.push(item.url)
                    // this.srcList_s.push(item.url)
                }
            });
            this.form.picc = List.join(',')
        },
        handlePreview(response, file, fileList) {
            this.fileList = fileList;
            let List = [];
            this.fileList.forEach(item => {
                if (item.response) {
                    List.push(item.response.data)
                } else {
                    List.push(item.url)
                }

            });
            this.form.picc = List.join(',');
        },
        cancel() {
            this.open = false;
        },
        // 删除
        handledelete(row) {
            row.forEach(item => {
                row.pId = item.pId
            });
            this.date1.pId = row.pId;
            deleteOnePCHSLFxiangqing001(this.date1).then(response => {
                this.$modal.msgSuccess(response.data.msg);
                this.getList();
            })
        },
        look(row) {
            row.forEach(item => {
                this.srcList.push(item.picFirst)
            })
        },
        looks(url) {
            this.srcList_s.push(url)
        },
    }
}
</script>
<style>
.el-upload-list.el-upload-list--picture {
    display: none !important;
    /* 这里设置原有的缩略图视图影藏 */
}

.el-upload-list.el-upload-list--picture.show {
    display: block !important;
    /* 展示自己自定义的 */
}
</style>
